<script setup lang="ts">
import { ArrowLeftBold, ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { ref, computed } from 'vue';
import axios from 'axios';
let user = ref(JSON.parse(localStorage.getItem('user') || '{}'))
const router = useRouter()
// 示例手机号
// 手机号逻辑：根据user有无数据来决定使用哪一个手机号
const phone = computed(() => user.value.phone ? user.value.phone : '15531090969');
// 格式化手机号
const formatPhoneNumber = (phone: string) => {
    return phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
};
const formattedPhone = computed(() => formatPhoneNumber(phone.value));

const clear = async (id: string) => {
    await axios.get('http://localhost:3000/yg/clearuser', { params: { id } }).then(res => {
        if (res.data.code == 200) {
            localStorage.removeItem('user')
            router.push('/login')
        }
    })

}
</script>
<template>
    <div id="account">
        <div class="top">
            <el-icon @click="router.back()">
                <ArrowLeftBold />
            </el-icon>
            <h3 style="margin: 0 auto">账号管理</h3>
        </div>
        <div class="main">
            <div class="info">
                <p>账号信息</p>
                <div class="phone">
                    <p>手机号</p>
                    <p>{{ formattedPhone }}</p>
                </div>
            </div>
            <div class="Safety">
                <p>安全设置</p>
                <div class="sup" @click="router.push('/change')">
                    <p>设置/修改密码</p>
                    <div>
                        <el-icon>
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>
                <div class="down" @click="clear(user._id)">
                    <p>注销账户</p>
                    <div>
                        <span style="font-size: 14px;color: #999999;">注销后无法恢复，请谨慎操作</span>
                        <el-icon>
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>



<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

#account {
    width: 100%;
    height: 100%;

    .top {
        width: 100%;
        height: 30px;
        display: flex;
    }

    .main {
        width: 100%;
        height: calc(100% - 30px);

        .info {
            width: 100%;
            height: 60px;

            .phone {
                width: 100%;
                height: 40px;
                line-height: 40px;
                background-color: #fff;
                display: flex;
                justify-content: space-between;
            }
        }

        .Safety {
            width: 100%;
            height: 90px;

            .sup {
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: space-between;
                background-color: #ffffff;
                align-items: center;
            }

            .down {
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: space-between;
                background-color: #ffffff;
                align-items: center;
            }
        }
    }

}
</style>